import React, { useState, useEffect } from 'react'
import { backgroundObj, navigateTo } from '@/utils/utils'
import { View, Swiper, SwiperItem, Button, Input, Text } from '@tarojs/components';
import Image from '@/components/FormCondition/Image'
import Taro, { getCurrentInstance, useDidShow, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
import {
    fetchUserHelpQaAnswerById,
    fetchUserHelpQaAnswerComment,
    fakeSaveHelpQaAnswerComment,
    fakeUnLikeHelpQaAnswerComment,
    fakeLikeHelpQaAnswerComment,
    fakeCollectOrUnCollectHelpQaAnswer,
    fakLikeOrCancelLikeHelpQaAnswer
} from '@/server/shop'
import './index.scss'
const MutualAllComponents = (props) => {
    const { data = {}, setFocusFlag, setDafaultData, fakeUnLikeHelpQa, fakeLikeHelpQaAnswer } = props
    const [visible, setVisible] = useState(false)
    const { content = '', replyUserHelpQaAnswerCommentList = [], likeFlag, unlikeFlag, unLikeAmount, viewAmount, operationFlag, likeAmount, answerAmount, createTime, username, collectAmount, userProfile } = data
    const { images = '', text } = content.length > 0 ? JSON.parse(content) : {}
    return <View className='MutualAll_change_box'>
        <View style={backgroundObj(userProfile)} className='MutualAll_profile_box'></View>
        <View className='MutualAll_content_box'>
            <View className='MutualAll_content_user'>
                <View className='MutualAll_content_username font_hide'>
                    {username}
                </View>
                <View onClick={() => fakeLikeHelpQaAnswer(data)} className='MutualAll_content_loop'>
                    <View className={likeFlag === '1' ? 'MutualAll_content_loopIcon1' : 'MutualAll_content_loopIcon2'}>

                    </View>
                    <View className='MutualAll_content_font1'>
                        {likeAmount}
                    </View>
                </View>
                <View onClick={() => fakeUnLikeHelpQa(data)} className='MutualAll_content_unLoop'>
                    <View className={unlikeFlag === '1' ? 'MutualAll_content_unLoopIcon1' : 'MutualAll_content_unLoopIcon2'}>

                    </View>
                    <View className='MutualAll_content_font1'>
                        {unLikeAmount}
                    </View>
                </View>
            </View>
            <View className='MutualAll_content_desc'>
                {text}
            </View>
            <View className='MutualAll_content_common'>
                <View className='MutualAll_common_address'>
                    {createTime}
                </View>
                <View onClick={() => {
                    setDafaultData({ commentId: data.id, })
                    setFocusFlag(true)
                }} className='MutualAll_common_handle'>
                    回复
                </View>
            </View>
            {replyUserHelpQaAnswerCommentList.map((item, index) => {
                if (replyUserHelpQaAnswerCommentList.length > 1 && !visible) {
                    if (index === 0) {
                        return <MutualAllComponentsInfo {...props} data={item}></MutualAllComponentsInfo>
                    }
                    else if (index === 1) {
                        return <View className='MutualAll_content_more' onClick={() => setVisible(true)}>
                            <View className='MutualAll_content_moreLiner'>

                            </View>
                            <View className='MutualAll_content_moreFont'>
                                展开{replyUserHelpQaAnswerCommentList.length - 1}条回复
                            </View>
                            <View className='MutualAll_content_moreIcon'>

                            </View>
                        </View>
                    }
                    return null
                }
                else {
                    return <MutualAllComponentsInfo {...props} data={item}></MutualAllComponentsInfo>
                }
            })}

        </View>
    </View>
}

const MutualAllComponentsInfo = (props) => {
    const { data = {}, setFocusFlag, setDafaultData } = props
    const { content = '', organizationUserId, id, commentId, replyUserName, replyUserHelpQaAnswerCommentList = [], likeFlag, unlikeFlag, unLikeAmount, viewAmount, operationFlag, likeAmount, answerAmount, createTime, username, collectAmount, userProfile } = data
    const { images = '', text } = content.length > 0 ? JSON.parse(content) : {}
    return <View className='MutualAll_change_box'>
        <View className='MutualAll_profile_box' style={backgroundObj(userProfile)}></View>
        <View className='MutualAll_content_box'>
            <View className='MutualAll_content_user'>
                <View className='MutualAll_content_username font_hide'>
                    {username}
                </View>
                <View onClick={() => fakeLikeHelpQaAnswer(data)} className='MutualAll_content_loop'>
                    <View className={likeFlag === '1' ? 'MutualAll_content_loopIcon1' : 'MutualAll_content_loopIcon2'}>

                    </View>
                    <View className='MutualAll_content_font1'>
                        {likeAmount}
                    </View>
                </View>
                <View onClick={() => fakeUnLikeHelpQa(data)} className='MutualAll_content_unLoop'>
                    <View className={unlikeFlag === '1' ? 'MutualAll_content_unLoopIcon1' : 'MutualAll_content_unLoopIcon2'}>

                    </View>
                    <View className='MutualAll_content_font1'>
                        {unLikeAmount}
                    </View>
                </View>
            </View>
            <View className='MutualAll_content_desc'>
                {replyUserName ? '回复' : ''}  {replyUserName ? <Text className='MutualAll_content_span'>{replyUserName}:</Text> : ''}  {text}
            </View>
            <View className='MutualAll_content_common'>
                <View className='MutualAll_common_address'>
                    {createTime}
                </View>
                <View onClick={() => {
                    setFocusFlag(true)
                    setDafaultData({
                        commentId: commentId,
                        replyCommentId: id,
                        replyUserId: organizationUserId,
                    })
                }} className='MutualAll_common_handle'>
                    回复
                </View>
            </View>
        </View>
    </View>
}
const MutualAll = (props) => {
    const { postId, postAnswerId } = getCurrentInstance().router.params
    const [data, setData] = useState({})
    const [list, setList] = useState([])
    const [value, setValue] = useState('')
    const [focusFlag, setFocusFlag] = useState(false)
    const [total, setTotal] = useState(0)
    const [defaultData, setDafaultData] = useState({})
    const [page, setPage] = useState({
        page: 1,
        limit: 30,
        searchType: 'all'
    })
    const fetchData = () => {
        fetchUserHelpQaAnswerComment({ ...page, postId, postAnswerId }).then(val => {
            const { postAnswerCommentList, total } = val
            setList([...list, ...postAnswerCommentList])
            setTotal(total)
        }).finally(() => {
            Taro.stopPullDownRefresh();
        });
    }
    const fakLikeOrCancelLike = () => {
        const { id, likeFlag, postId } = data
        fakLikeOrCancelLikeHelpQaAnswer({
            postId: postId,
            answerId: id
        }).then(val => {
            setData({
                ...data,
                likeFlag: likeFlag === '1' ? '0' : '1'
            })
        })
    }

    const fakeCollectOrUnCollectHelp = () => {
        const { id, collectFlag, postId } = data
        fakeCollectOrUnCollectHelpQaAnswer({
            postId: postId,
            answerId: id,
        }).then(val => {
            setData({
                ...data,
                collectFlag: collectFlag === '1' ? '0' : '1'
            })
        })
    }

    const fakeUnLikeHelpQa = (data) => {
        const { id, postId, commentId } = data
        fakeUnLikeHelpQaAnswerComment({
            postId: postId,
            answerId: id,
            commentId
        }).then(val => {
            setPage(() => {
                return {
                    ...page,
                    page: 1
                }
            })
        })
    }

    const fakeLikeHelpQaAnswer = (data) => {
        const { id, postId, commentId } = data
        fakeLikeHelpQaAnswerComment({
            postId: postId,
            answerId: id,
            commentId
        }).then(val => {
            setPage(() => {
                return {
                    ...page,
                    page: 1
                }
            })

        })
    }

    useEffect(() => {
        fetchData()
    }, [page])
    usePullDownRefresh(() => {
        setPage(() => {
            setList([])
            return {
                ...page,
                page: 1,

            }
        })
    })
    useReachBottom(() => {
        setPage({
            ...page,
            page: page.page + 1
        })
    })
    useDidShow(() => {
        fetchDetail()
    })
    const fetchDetail = () => {
        fetchUserHelpQaAnswerById({
            id: postAnswerId,
            searchType: 'all'
        }).then((val = {}) => {
            const { postAnswer } = val
            setData(postAnswer)
        })
    }
    const submit = (data) => {
        const { commentId, replyUserId, replyCommentId } = data
        fakeSaveHelpQaAnswerComment({
            replyUserId,
            replyCommentId,
            commentId,
            postId,
            postAnswerId,
            content: JSON.stringify({
                text: value
            })
        }).then(val => {
            setValue('')
            setFocusFlag(false)
            // if (Object.keys(defaultData).length > 0) { }
            // else {
            //     setList()
            // }
            setPage(() => {
                setList([])
                return {
                    ...page, page: 1
                }
            })
            setDafaultData({})

        })
    }
    const { content = '', viewAmount, operationFlag, likeAmount, answerAmount, createTime, username, collectAmount, userProfile } = data
    const { images = '', text } = content.length > 0 ? JSON.parse(content) : {}
    const imageList = images.split(',').filter(val => {
        return val
    })
    return <View className='MutualAll_box'>
        <View className='MutualAll_card_box'>
            <View className='MutualAll_card_userBox'>
                <View className='MutualAll_card_userLeft'>
                    <View style={backgroundObj(userProfile)} className='MutualAll_card_profile'></View>
                    <View className='MutualAll_card_username font_hide'>
                        {username}
                    </View>
                </View>
            </View>
            <View className='MutualAll_card_desc'>
                {text}
            </View>
            <View className="Collect_list_showImage">
                {imageList.map(val => {
                    return <View className="Collect_list_image">
                        <Image src={val}></Image>
                    </View>
                })}
            </View>
            <View className='MutualAll_card_bottom'>
                <View className='MutualAll_card_bottomLeft'>
                    回答于 {createTime}
                </View>
                <View className='MutualAll_card_bottomRight'>
                    <View onClick={() => { fakLikeOrCancelLike() }} className='MutualAll_card_iconBox'>
                        <View className={data.likeFlag === '1' ? 'MutualAll_card_icon MutualAll_card_iconStyle2' : 'MutualAll_card_icon MutualAll_card_iconStyle1'}></View>
                        <View className=''>
                            {data.likeAmount}
                        </View>
                    </View>
                    <View className='MutualAll_card_iconBox'>
                        <View className='MutualAll_card_icon MutualAll_card_iconStyle3'></View>
                        <View className=''>
                            {viewAmount}
                        </View>
                    </View>
                    <View onClick={() => { fakeCollectOrUnCollectHelp() }} className='MutualAll_card_iconBox'>
                        <View className={data.collectFlag === '1' ? 'MutualAll_card_icon MutualAll_card_iconStyle5' : 'MutualAll_card_icon MutualAll_card_iconStyle4'}></View>
                        <View className=''>
                            {collectAmount}
                        </View>
                    </View>
                </View>
            </View>
        </View>
        <View className='MutualAll_liner'></View>
        <View className='MutualAll_Components_box'>
            <View className='MutualAll_Components_hf'>
                共{total}条回复
            </View>
            {list.map(val => {
                return <MutualAllComponents fakeUnLikeHelpQa={fakeUnLikeHelpQa} fakeLikeHelpQaAnswer={fakeLikeHelpQaAnswer} setFocusFlag={setFocusFlag} setDafaultData={setDafaultData} data={val}></MutualAllComponents>
            })}
        </View>
        <View className='SelectedQuestionDetail_pl_height'></View>
        <View className='SelectedQuestionDetail_pl_handle'>
            <View className='SelectedQuestionDetail_change_box'>
                {/* <View className='SelectedQuestionDetail_change_image'></View> */}
                <Input value={value} onInput={(e) => {
                    setValue(e.target.value)
                }} onConfirm={() => {
                    submit({
                        postId,
                        postAnswerId,
                        ...defaultData,
                    })
                }} confirmType='send' focus={focusFlag} placeholder='说点什么' className='SelectedQuestionDetail_pl_input'></Input>
            </View>

        </View>
    </View >
}
export default MutualAll